<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="score-item flexWrap">
					<image src="/static/home/reduce-icon.png" class="score-btn" @tap="reduce(0)"></image>
					<view class="score-num">
						{{scoreNum}}
					</view>
					<image src="/static/home/add-icon.png" class="score-btn" @tap="add(0)"></image>
				</view>
				<view class="reset-btn" @tap="reset()">重置</view>
				<view class="score-item flexWrap">
					<image src="/static/home/reduce-icon.png" class="score-btn" @tap="reduce(1)"></image>
					<view class="score-num">
						{{scoreNum2}}
					</view>
					<image src="/static/home/add-icon.png" class="score-btn" @tap="add(1)"></image>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				scoreNum:0,
				scoreNum2:0,
				order_no:""
			}
		},
		onLoad(ops) {
			this.order_no=ops.order_no
			this.scoreNum=ops.scoreNum
			this.scoreNum2=ops.scoreNum2
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onUnload() {
			let pages = getCurrentPages(); //当前页
			let beforePage = pages[pages.length - 2]; //上个页面
			beforePage.$vm.orderDetails()
		},
		methods: {
			reduce(index){
				if(index==0){
					if(this.scoreNum==0) return
					this.scoreNum--
				}else{
					if(this.scoreNum2==0) return
					this.scoreNum2--
				}
				this.updateScore(index)
			},
			add(index){
				if(index==0){
					this.scoreNum++
				}else{
					this.scoreNum2++
				}
				this.updateScore(index)
			},
			reset(){
				uni.showModal({
					title:'提示',
					content:'是否重置比分?',
					success: (res) => {
						if(res.confirm){
							this.scoreNum=0
							this.scoreNum2=0
							this.resetScore();
						}
					}
				})
			},
			// 更新比分
			updateScore(index){
				this.$request.post(this.$api.updateScore, {
					store_id: uni.getStorageSync('store_id'),
					order_no: this.order_no,
					type:index==0?'red':'blue',
					num:index==0?this.scoreNum:this.scoreNum2
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						
					}
				})
			},
			resetScore(){
				this.$request.post(this.$api.resetScore, {
					store_id: uni.getStorageSync('store_id'),
					order_no: this.order_no
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.$tools.showToast('重置成功')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 28upx;
	}
	.reset-btn{
		width: 320rpx;
		height: 96rpx;
		background: #090C11;
		border-radius: 72rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		margin-top: -36upx;
	}
	.score-item{
		height: 694rpx;
		background: linear-gradient( 180deg, #F77942 0%, #FFCD88 100%);
		border-radius: 20rpx;
		padding: 0 48upx;
		&:nth-last-of-type(1){
			background: linear-gradient( 180deg, #3D46C7 0%, #7781FD 100%);
			margin-top: 14upx;
		}
		.score-btn{
			width: 96upx;
			height: 96upx;
		}
		.score-num{
			width: 380upx;
			height: 380upx;
			background: url(../static/home/scoreBg.png) no-repeat center/ 100% 100%;
			font-family: cursive;
			font-weight: bold;
			font-size: 360rpx;
			color: #FFFFFF;
			line-height: 380upx;
			text-align: center;
		}
	}
</style>
